<!--我的收藏-->
<template>
	<div class="app">

		<common-header :tittle="tittle" :showback="true"></common-header>

		<div class="box">

			<!-- 最新内容 -->
			<div class="latestContents">

				<div class="content" v-for="(item, index) in proData" :key="item.id" v-show="latestContents">
					<label for=""> 
						<span class="check"><input type="checkbox" :value="index" v-model="selectArr" class=""> </span>
						</label>
					<div class="nav-l">

						<p class="unfold">{{item.text | filterFun}}</p>
						<p><span v-text="item.type"></span><span></span></p>
					</div>
					<div class="nav-r">
						<img :src="item.imgSrc" alt="">
					</div>
				</div>

				<div v-show="nolist" class="nolist">
					<img src="@/assets/imgs/my/nocollection@2x.png" alt="" />
					<span>暂无收藏</span>
				</div>
			</div>

			<div class="del" v-show="showPrise">
				<label> 
					<input type="checkbox" class="checkbox" @click="selectAll" />全选 
				</label>
				<button type="" class="delete" @click="del">删除</button>

				<!--{{selectArr}}-->
			</div>

		</div>
	</div>
</template>

<script>
	import commonHeader from 'common/common-header-back'
	var proData = [{
			'text': '必由之路第七集速览 解说词  第八集速览',
			'type': "体验",

			'imgSrc': require('@/assets/imgs/thr_mg3.png'),
			'link': "www.baidu.com",
		},
		{
			'text': '必由之路第七集速览 解说词  第八集速览',
			'type': "体验",

			'imgSrc': require('@/assets/imgs/thr_mg3.png'),
			'link': "www.baidu.com",
		},
		{
			'text': '必由之路第七集速览 解说词  第八集速览',
			'type': "体验",

			'imgSrc': require('@/assets/imgs/thr_mg3.png'),
			'link': "www.baidu.com",
		},

	]

	export default {
		data() {
			return {
				showPrise:false,
				nolist: true,
				latestContents: false,
				demo1: false,
				proData: proData,
				selectArr: [],
				tittle: '我的收藏',
				num: 0,

			}
		},
		//		异步加载数据
		created() {
			this.$http.get('').then(function(response) {
				response = response.body;
				this.proData = response.data;
			})
		},

		methods: {

			del() {
				let arr = [];
				var len = this.proData.length;
				for(var i = 0; i < len; i++) {
					if(this.selectArr.indexOf(i) >= 0) {
						console.log(this.selectArr.indexOf(i))
					} else {
						arr.push(proData[i])
					}
				}

				this.proData = arr;
				this.selectArr = []
			},
			selectAll(event) {
				var _this = this;
				console.log(event.currentTarget)
				if(!event.currentTarget.checked) {
					this.selectArr = [];
				} else { //实现全选
					_this.selectArr = [];
					_this.proData.forEach(function(item, i) {
						_this.selectArr.push(i);
					});
				}
			}
		},
		//管道-字符串截取
		filters: {
			filterFun: function(value) {
				if(value && value.length > 30) {
					value = value.substring(0, 30) + '...';
				}
				return value;
			}
		},

		components: {

			commonHeader,

		},
		computed: {}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
	@import "~styles/index.less";
	@import "~styles/variable.less";
	.hello {
		h1 {
			color: red;
			.fs(38);
		}
	}
	
	.box {
		margin-top: 50px;
		font-size: 15px;
	}
	
	.list {
		background: #fff;
		h3 {
			background-color: #ECECEC;
			height: 35px;
			line-height: 35px;
			text-align: left;
			padding-left: 15px;
			color: @base-sp-text-color9;
			font-size: 12px;
		}
		.links {
			padding-left: 15px;
			background: #fff;
			&:active {
				background-color: #ECECEC;
			}
		}
		p {
			height: 50px;
			text-align: left;
			line-height: 50px;
			font-size: 15px;
			color: rgba(51, 51, 51, 1);
			font-weight: 500;
			border-bottom: 1px solid @border-color;
			position: relative;
			display: flex;
			justify-content: space-between;
			span {
				&:last-child {
					color: @base-sp-text-color9;
					margin-right: 35px;
				}
			}
			&:after {
				content: " ";
				display: inline-block;
				height: 6px;
				width: 6px;
				transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
				position: absolute;
				top: 50%;
				margin-top: -4px;
				right: 17px;
				border-width: 2px 2px 0px 0px;
				border-color: rgb(200, 200, 205);
				border-style: solid;
			}
		}
	}
	
	.none:before {
		border-top: none !important;
	}
	
	.list2 {
		margin-top: 7px;
	}
	/*	/*
	.sex {
		padding: 0 15px;
		.weui-cell {
			padding: 0 !important;
			height: 50px;
		}
		
	}*/
	
	.weui-label {
		text-align: left !important;
	}
	
	.vux-no-group-title {
		margin-top: 0px !important;
		border: none;
	}
	
	.weui-cells:before {
		border-top: none !important;
	}
	
	.vux-popup-picker-select {
		text-align: right !important;
	}
	
	.vux-cell-bd p {
		text-align: left;
		font-size: 15px;
	}
	
	.weui-cells {
		padding: 0px 0 !important;
		h3 {
			height: 35px;
			text-align: left;
			line-height: 35px;
			font-size: 12px;
			padding-left: 15px;
			color: @base-sp-text-color9;
			background: rgba(245, 245, 245, 1);
		}
	}
	
	.weui-cell_access .weui-cell__ft,
	.vux-popup-picker-select {
		font-size: 14px;
	}
	
	.vux-label {
		padding: 5px 0;
	}
	
	.weui-cell__hd {
		font-size: 15px;
		padding: 5px 0;
	}
	
	.latestContents {
		width: calc(100% - 30px);
		padding: 0 15px 20px 15px;
		h3 {
			font-size: 15px;
			font-weight: bold;
			width: calc(100% - 30px);
			text-align: left;
			padding: 20px 0 25px 0px;
			position: relative;
		}
		.content {
			font-size: 14px;
			display: flex;
			margin-bottom: 20px;
			justify-content: space-between;
			.check {
				height: 100%;
				position: relative;
				width: 25px;
				display: inline-block;
				input {
					position: absolute;
					top: 0;
					left: 0;
					bottom: 0;
					margin: auto;
				}
			}
			.nav-l {
				text-align: left;
				.unfold {
					height: 50px;
				}
				p {
					&:first-child {
						line-height: 25px;
					}
					&:last-child {
						margin-top: 6px;
						font-size: 12px;
						display: flex;
						justify-content: space-between;
						color: #CCCCCC;
						span {
							&:last-child {
								position: relative;
								&:after {
									position: absolute;
									content: '';
									width: 14px;
									height: 10px;
									background-size: 100% 100%;
									vertical-align: middle;
									left: -48px;
									right: 0;
									top: 0;
									bottom: 0;
									margin: auto;
								}
							}
						}
					}
				}
			}
			.nav-r {
				margin-left: 25px;
				height: 75px;
				border-radius: 5px;
				img {
					width: 111px;
					height: 73px;
					border-radius: 5px;
				}
			}
		}
	}
	.app{
		background: #fff;
	}
	
	.del {
		display: flex;
		position: fixed;
		bottom: 0;
		justify-content: space-between;
		height: 44px;
		border-top: 1px solid @border-color;
		width: 100%;
		label {
			padding-left: 15px;
			font-weight: 500;
			height: 44px;
			color: rgba(153, 153, 153, 1);
			width: 100px;
			line-height: 44px;
			text-align: left;
			.checkbox {
				text-align: center;
				vertical-align: middle;
				margin-right: 10px;
			}
		}
		.delete {
			width: 100px;
			height: 44px;
			border: none;
			background: @base-blue-color;
			line-height: 44px;
			color: #fff;
		}
	}
	
	.nolist {
		margin: 0 auto;
		margin-top: 143px;
		height: 85px;
		width: 85px;
		img {
			width: 100%;
			height: 100%;
		}
		span {
			font-size: 12px;
			font-weight: 500;
			color: rgba(204, 204, 204, 1);
		}
	}
</style>